<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>签到</title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="../css/mui.min.css" rel="stylesheet" />
		<link rel="stylesheet" href="../css/user.css" />
		<link rel="stylesheet" href="../css/public_fontsize.css" />
		<style>
			.qiandao{width: 100%;background: #330a0c;height: 100%;position: relative;}
			.qd_bg{width: 100%;padding-top: 8%;}
			.qd_bg img{width: 94%;margin: 0 auto;}
			.qd_m{position: absolute;width: 100%;top: 5%;left: 0;}
			.qd_data{color: #fff;margin-top: 20%;text-align: center;}
			.qd_data span{padding: 0 0.5em;}
			.qd_list{width: 100%;margin-top: 6%;position: relative;}
			.qd_da{position: absolute;bottom: -1.8em;left: 4.75%;width: 90.5%;}
			.qd_da a{width: 14.28%;float: left;text-align: center;display: block;color: #fff;}
			.qd_list ul{width: 90.5%;margin: 0 auto;position: relative;}
			.qd_list ul li{color: #fff;width: 14.28%;float: left;position: relative;cursor: pointer;}
			.li_hx{width: 100%; height: 3px;display: none;position: absolute;top: 48%;left: 0;background: #ffc050;z-index: 1;}
			.qd_list ul .active {}
			
			.qd_list ul li img{width: 60%;margin: 0 auto;}
			.ul_hx{width: 100%;height: 3px;display: block;position: absolute;top: 48%;left: 0;background: #db778c;}
			.qd_img2{position: absolute;top: 0;left: 25%;z-index: 2;display: none;}
			.qd_img3{position: absolute;top: -10%;left: 25%;z-index: 2;width: 80% !important;display: none;}
			.qd_jx{position: absolute;top: -2.3em;left: 20%;width: 65% !important;}
			.qd_btn{width: 100%;margin-top: 16.5%;text-align: center;}
			.qd_btn a{width: 45%;border-radius: 0.5em;height: 2.2em;line-height: 2em;display: block;background: #f2b400;margin: 0 auto;color: #fff;border-bottom: solid 0.2em #b98900;}
			.qd_gz{width: 90%;margin: 10% auto;}
			.qd_gz_p{text-align: center;}
			.qd_gz_p span{ display: block;font-size: 3em; color: #ce677d; position: relative;}
			.qd_gz_p span:before, .qd_gz_p span:after{ content: '';position: absolute;top: 52%; background: #703038;width: 35%; height: 1px;}
			.qd_gz_p span:before{ left: 0;}
			.qd_gz_p span:after{ right: 0;}
			.qiandao_gz{width: 100%;margin-top: 8%;border: solid 1px #703038;border-radius: 8px;padding: 5% 0;text-align: center;position: relative;}
			.qiandao_gz .qd_span{position: absolute;height: 2em;top: -1em;left: 27.5%;width: 45%;background: #330a0c;color: #fff;}
			.qiandao_gz .qd_span em{color: #f2b400;padding: 0 0.1em;}
			.qiandao_gz .qd_im_m{margin-top: 4%;text-align: center;}
			.qiandao_gz .qd_im_m img{display: initial;width: 4em;}
			.qiandao_gz .qd_im_m p{text-align: center;color: #fff;}
			.qiandao_gz .qd_im_m p em{color: #f2b400;padding: 0 0.2em;}

		</style>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav white fs_xl">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title fs_xl">签到</h1>
		</header>
		<div class="mui-content fs_xl" style="height: 100%;">
			<div class="qiandao">
				<div class="qd_bg">
					<img src="../images/qiandao.png" />
				</div>
				<div class="qd_m">
					<div class="qd_data fs_xxl">第<span class="fs_xxxi">0</span>天</div>
					<div class="qd_list">
						<ul class="cls">
							<li class="item1">
								<img class="qd_img1" src="../images/qiandao_bg.png" />
								<img class="qd_img2" src="../images/qiandao_03.png" />
								<img class="qd_img3" src="../images/qiand_01.png" />
								<span class="li_hx"></span>
							</li>
							<li class="item2">
								<img class="qd_img1" src="../images/qiandao_bg.png" />
								<img class="qd_img2" src="../images/qiandao_03.png" />
								<img class="qd_img3" src="../images/qiand_01.png" />
								<span class="li_hx"></span>
							</li>
							<li class="item3">
								<img class="qd_img1" src="../images/qiandao_bg.png" />
								<img class="qd_img2" src="../images/qiandao_03.png" />
								<img class="qd_img3" src="../images/qiand_01.png" />
								<span class="li_hx"></span>
							</li>
							<li class="item4">
								<img class="qd_img1" src="../images/qiandao_bg.png" />
								<img class="qd_img2" src="../images/qiandao_03.png" />
								<img class="qd_img3" src="../images/qiand_01.png" />
								<span class="li_hx"></span>
							</li>
							<li class="item5">
								<img class="qd_img1" src="../images/qiandao_bg.png" />
								<img class="qd_img2" src="../images/qiandao_03.png" />
								<img class="qd_img3" src="../images/qiand_01.png" />
								<span class="li_hx"></span>
							</li>
							<li class="item6">
								<img class="qd_img1" src="../images/qiandao_bg.png" />
								<img class="qd_img2" src="../images/qiandao_03.png" />
								<img class="qd_img3" src="../images/qiand_01.png" />
								<span class="li_hx"></span>
							</li>
							<li class="item7">
								<img class="qd_img1" src="../images/qiandao_bg.png" />
								<img class="qd_img2" src="../images/qiandao_03.png" />
								<img class="qd_img3" src="../images/qiand_01.png" />
								<span class="li_hx"></span>
								<img class="qd_jx" src="../images/qiandao_jx.png" />
							</li>
							<a class="ul_hx"></a>
						</ul>
						<div class="qd_da">
							<a class="fs_m">1</a>
							<a class="fs_m">2</a>
							<a class="fs_m">3</a>
							<a class="fs_m">4</a>
							<a class="fs_m">5</a>
							<a class="fs_m">6</a>
							<a class="fs_m">7</a>
						</div>
					</div>
					<div class="qd_btn">
						<a class="fs_xi">签到</a>
					</div>
				</div>
				<div class="qd_gz">
					<p class="qd_gz_p"><span class="fs_xl">签到规则</span></p>
					<div class="qiandao_gz">
						<span class="qd_span fs_xl">每连续签到<em>7</em>天</span>
						<div class="qd_im_m">
							<img src="../images/qianda_yjb.png" />
							<p>奖励<em>+200</em>银酒币</p>
						</div>
					</div>
				</div>
			</div>
		</div>
		<script src="../js/mui.min.js"></script>
		<script type="text/javascript" src="../js/jquery-1.8.3.min.js"></script>
		<script type="text/javascript">
			mui.init();
			$(".qd_m").height($(".qd_bg img").height());
			$(".qd_list li").height($(".qd_img1").height());
			var imgL = $(".qd_list li").width() - $(".qd_img1").width();
			var imgL1 = $(".qd_list li").width() - $(".qd_img3").width();
			$(".qd_img2").css("left", imgL / 2);
			$(".qd_img3").css("left", imgL1 / 2);
			var nums = 0;
			$(function() {
				$(".qd_btn a").on("click", function() {
					nums = nums + 1;
					if(nums > 7) {
						nums = 0;
						$(".qd_data span").text(nums);
						$(".qd_list li").find(".qd_img3").hide();
						$(".qd_list li").find(".qd_img2").hide();
						$(".qd_list li").find(".qd_img1").show();
						$(".qd_list li").find(".li_hx").hide();
						$(".qd_list li").removeClass("active");
					} else {
						$(".qd_data span").text(nums);
						$(this).text("已签到");
						var qdLi = $(".qd_list li");
						$(".item" + nums).addClass("active");
						$(".active").find(".qd_img1").hide();
						$(".active").find(".qd_img3").show();
						$(".active").find(".li_hx").show();
						if($(".item" + nums).siblings().hasClass("active")) {
							$(".item" + nums).siblings(".active").find(".qd_img3").hide();
							$(".item" + nums).siblings(".active").find(".qd_img2").show();
						} else {
							return false;
						}
						if(nums > 7) {
							nums = 1;
							$(".qd_list li").find(".qd_img3").hide();
							$(".qd_list li").find(".qd_img2").hide();
						}
					}
				})
			})
		</script>
	</body>

</html>